<!--
 * @Author: your name
 * @Date: 2020-03-04 16:09:12
 * @LastEditTime: 2020-05-18 17:21:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \boot_vue\src\views\pages\theme.vue
 -->
<template>
  <div class="theme"
       :style="visible? 'right:0':'right:-20%'">
    <div class="close">
      <span>主题</span>
      <el-button type="text"
                 @click="closeDialog"
                 icon="el-icon-close"></el-button>
    </div>
    <div class="theme-content">
      <el-radio-group v-model.trim="radio">
        <el-radio v-for="item of themeList"
                  :key="item.name"
                  :label="item.name"
                  @change="themeChange"
                  class="item">{{item.desc}}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import themes from '@/element-ui/config.js'
import { mapMutations } from 'vuex'
export default {
  name: '',
  mounted () {
    let mode = localStorage.getItem('mode') || 'light'
    this.setTheme(mode)
    this.radio = mode
  },
  data () {
    return {
      visible: false,
      radio: ''
    }
  },
  computed: {
    themeList () {
      const arr = []
      arr.push(...themes)
      return arr
    }
  },
  methods: {
    ...mapMutations(['setTheme']),
    themeChange (val) {
      // this.closeDialog()
      localStorage.setItem('mode', val)
      this.setTheme(val)
    },
    closeDialog () {
      this.visible = false
    },
    init () {
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.theme {
  position: fixed;
  right: 0;
  top: 10%;
  z-index: 9999999;
  padding: 10px 10px;
  padding-top: 0;
  width: 150px;
  border-radius: 8px 0 0 8px;
  transition: all 0.5s;
  .close {
    width: 100%;
    display: flex;
    justify-content: space-between;
    span {
      padding: 12px 0;
      font-weight: bold;
    }
  }
  .item {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
